<template>
    <view>
        <view class="uni-padding-wrap">
            <!-- 评论区 start -->
            <view class="uni-comment">
            
                <view class="uni-comment-list">
                    <view class="uni-comment-face">
                        <image :src="comment.userAvatar!=null?comment.userAvatar:src" mode="widthFix"></image>
                    </view>
					<view class="uni-comment-top">
					    <text>{{comment.createUserName}}</text>
					</view>
                    <view class="uni-comment-body">
                       
                        <view class="uni-comment-content">{{comment.content}}</view>
                        <view class="uni-comment-date">
                            <view>{{comment.createTime}}</view>
                           <view style="display: flex;">
							   <view class="uni-comment-replay-btn" v-if="comment.children.length>0"
								@click="showReply">共{{comment.children.length}}条回复</view>
							   <view class="uni-comment-replay-btn" @click="showCommentInput(true,comment)">回复</view>
							   <view class="uni-comment-replay-btn"  @click="deleteComment(comment.id)">
								   <u-text type="error" text="删除"></u-text>
							   </view>
						   </view>
                        </view>
                    </view>
					<view v-if="isShowReply" class="uni-comment-list" v-for="(ite,ind) in comment.children" :key="ite.id">
					    <view class="uni-comment-face">
					        <image :src="ite.userAvatar!=null?ite.userAvatar:src" mode="widthFix"></image>
					    </view>
						<view class="uni-comment-top">
						  
							<text>{{ite.createUserName+'回复@'+ite.parentUserName}}</text>
						</view>
					    <view class="uni-comment-body">
					       
					        <view class="uni-comment-content">{{ite.content}}</view>
					        <view class="uni-comment-date">
					            <view>{{ite.createTime}}</view>
					           <view style="display: flex;">
								    <view class="uni-comment-replay-btn" @click="showCommentInput(true,ite)">回复</view>
								   <view class="uni-comment-replay-btn"  @click="deleteComment(ite.id)">
									   <u-text type="error" text="删除"></u-text>
								   </view>
							   </view>
					        </view>
					    </view>
						
							
					</view>
						
                </view>
            </view>
        </view>
		<comment-input :show="isShow" @sedComment="sedComment" @showCommentInput="showCommentInput"></comment-input>
    </view>
</template>

<script>
	import commentInput from '../comment-input/comment-input.vue';
    export default {
		name:'comment-list-item',
		
		components:{
			commentInput
		},
		props:{
			comment:{
				type:[Array,Object],
				default:function(){
					return [];
				}
			}
		},
        data() {
            return {
                title: "评论界面",
				src:'https://object-1258733684.cos.ap-chengdu.myqcloud.com/file/1648552852592.ico',
				 isShow:false,
				 isShowReply:false,
				 
            }
        },
		onLoad() {
			console.log(this.treeData)
		},
		methods:{
			showReply(){
				this.isShowReply=!this.isShowReply
			},
			showCommentInput(isShow,item){
				
				
				this.parentId=item!=null?item.id:null
				this.parentUserName=item!=null?item.createUserName:null
				console.log(this.parentUserName)
				this.isShow=isShow;
			},
			sedComment(val){
				
				
				this.$emit("sedComment",val,this.parentId,this.parentUserName)
				this.isShow=false
			},
			deleteComment(id){
				this.$emit("deleteComment",id);
			}
			
		}
    }
</script>

<style scoped lang="scss">
    /* comment */
    page {
        background-color: #f8f8f8;
    }

    .uni-padding-wrap {
        padding: 30upx;
    }

    view {
        font-size: 28upx;
    }

    .uni-comment {
        padding: 5rpx 0;
        display: flex;
        flex-grow: 1;
        flex-direction: column;
		border-bottom:1px solid #5199ff;
		position: relative;
    }
	

    .uni-comment-list {
        flex-wrap: wrap;
        /* padding: 10rpx 0;
        margin: 10rpx 0; */
        width: 100%;
        display: flex;
    }

    .uni-comment-face {
        width: 70upx;
        height: 70upx;
        border-radius: 100%;
        margin-right: 20upx;
        flex-shrink: 0;
        overflow: hidden;
    }

    .uni-comment-face image {
        width: 100%;
        border-radius: 100%;
    }

    .uni-comment-body {
        width: 100%;
		margin-left: 13%;
    }

    .uni-comment-top {
        line-height: 1.5em;
        justify-content: space-between;
    }

    .uni-comment-top text {
        color: #0A98D5;
        font-size: 24upx;
    }

    .uni-comment-date {
        line-height: 38upx;
        flex-direction: row;
        justify-content: space-between;
        display: flex !important;
        flex-grow: 1;
    }

    .uni-comment-date view {
        color: #666666;
        font-size: 24upx;
        line-height: 38upx;
    }

    .uni-comment-content {
        line-height: 1.6em;
        font-size: 28upx;
        padding: 8rpx 0;
    }

    .uni-comment-replay-btn {
        background: #FFF;
        font-size: 24upx;
        line-height: 28upx;
        //padding: 5rpx 20upx;
        border-radius: 30upx;
        color: #333 !important;
        margin: 0 10upx;
    }
</style>
